<template>
  <div id="main">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="注册界面"
        left-text="返回"
        right-text="其它"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>
    <div class="container">
      <div class="logo">
        <img src="../../../assets/image/logo1.png" alt="" />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: false, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="nick"
          type="text"
          name="昵称"
          label="请填写昵称"
          placeholder="请填写昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="uploader" :after-read="afterRead" />
          </template>
        </van-field>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { requestregistr, RequestUploadFile } from "@/api/user.js";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      username: "",
      password: "",
      nick: "",
      uploader: [],
      url: "", //头像
    };
  },
  methods: {
    async afterRead(fileMsg) {
      let formdata = new FormData();
      formdata.append("headerImg", fileMsg.file);
      let data = await RequestUploadFile(formdata);
      let { resultCode, resultInfo } = data.data;
      if (resultCode == 1) {
        setTimeout(() => {
          fileMsg.status = "uploading";
          fileMsg.message = "上传中...";
        }, 0);
        setTimeout(() => {
          fileMsg.status = "success";
          fileMsg.message = "上传成功";
          let url = resultInfo.url;
          this.url = url;
        }, 5000);
      } else {
        setTimeout(() => {
          fileMsg.status = "failed";
          fileMsg.message = "上传失败";
        }, 3000);
      }
    },

    async onSubmit() {
      let res = await requestregistr(this.username, this.password, this.url, this.nick);
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        setTimeout(() => {
          this.$router.push({ path: "/login" });
        }, 2000);
        Toast.success("注册成功！");
      } else {
        Toast.fail("注册失败~");
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$toast("待开发");
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  p {
    color: red;
    font-size: 14px;
  }
  .container {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .van-form {
      .van-field {
        height: 50px;
        line-height: 50px;
      }
    }

    .van-uploader {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .logo {
      width: 160px;
      height: 160px;
      text-align: center;
      margin-top: 40px;
      color: white;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
